<template>
    <section class="p_re">
        <!--单个上传-->
        <!-- v-if="img != '0'" -->
        <div @click.self="material()"  v-if="img != '0'" class="backsize"
            :style="{backgroundImage: 'url(' +newImg + ')',width:Width,height:Height}"
            :class="[newImg?'avatar-uploader':'avatar-uploaderNo']">
            <i  class="el-icon-plus" 
                @click.self="material()" 
                v-if="!newImg"></i>
            <div class="avatar-layer">
            <i class="el-icon-search" @click.self="largeImg(newImg)"></i>
            <i class="el-icon-delete" @click.self="deleteImg"></i>
            </div>
        </div>
        <!--多个上传-->
         <!-- @drop='drop($event)' -->
        <div class="avatar-box" v-if="imgLists != '0'">
            <div v-for=" (item,index) in imgdata"
                :style="{backgroundImage: 'url(' +(item.path?item.path:path)+item.imageUrl + ')',
                        width:Width,
                        height:Height}"
                :key="index"
                :draggable="Draggable"
                class="avatar-uploader"
                >
                <!-- @dragstart='drag($event,index)'
                @dragover='allowDrop($event,index)' -->
                <div class="avatar-layer">
                    <i class="el-icon-search" @click.self="largeImg((item.path?item.path:path)+item.imageUrl)"></i>
                    <i class="el-icon-delete" @click.self="deleteImg(index)"></i>
                </div>
            </div>
            <div @click ="material()"
                :style="{'width':Width,'height':Height,'line-height':Height}"
                class="avatar-uploaderNo"
                :class="{'shop-box-center':imgLists != '0'}">
                <i  class="el-icon-plus" >
                </i>
            </div>
        </div>
        <!-- 文字提示 -->
        <label for="" class="tip-txt p_ab" :style="{left:Left,bottom: Bottom}" v-if="TipTxtShow">{{TipTxt}}</label>
        <!-- //图片放大弹出层 -->
        <el-dialog :visible.sync="materialLargeSrcVisible"  width="800px">
        <div class="largeSrc-box">
          <img :src="largeSrc" alt="" class="img">
        </div>
    </el-dialog>
    </section>
</template>
<script>
export default {
    props:{
      path:{
        type: String
      },
      img:{
        type: String,
        default: '0'
      },
      imgLists:{
        type: [Array,String],
        default:'0'
      },
      width:{
        type: [String, Number],
        default: '75px'
      },
      height:{
        type: [String, Number],
        default: '75px'
      },
      Draggable:{
        type: Boolean
      },
      max:{
        type: Number
      },
      selecType:{
        type: Boolean,
        default: false
      },
      left:{
        type: [String, Number],
        default: '90px'
      },
      bottom:{
        type: [String, Number],
        default: '-10px'
      },
      tipTxtShow:{
        type: Boolean,
        default: false
      },
      tipsTxt:{
        type: String,
        default: '建议为正方型图片，尺寸建议为90 * 90 px'
      },
      materialUrl:{
        type: String,
        default: 'https://suc.deeptel.com.cn/common/material.do'
      }
    },
  data(){
      return{

        imgdata:[],//多个图片
        newImg:'',//单个图片

        Width: this.width,
        Height:  this.height,
        Left: this.left,
        Bottom:  this.bottom,
        
        imgUrl: this.path || '',//域名
        Maxlength: this.max || false,//上传限制张数
        Drag: this.Draggable || false,//是否拖动

        materialLargeSrcVisible: false,
        largeSrc:'',
        dom:'',
        oldX:'',//拖动开始值
        TipTxtShow:this.tipTxtShow,
        TipTxt:this.tipsTxt
      }
  },
   watch:{
      'img'(a,b){
        //单个上传数据
          this.newImg = a;
         
      },
      'imgLists'(a,b){
        //多个上传数据
        a.forEach((item,i)=>{
            if(item.sort){
                item.sort = i+1
            }
          
        })
        this.imgdata = a;
      },
      'materialLargeSrcVisible'(a){
        console.log(a,'aaaaa')
        if(a){
          parent.parent.parent.window.postMessage("openMask()", "*");
        }else{
          parent.parent.parent.window.postMessage("closeMask()", "*");
        }
      }
    },
    mounted () {
      //单图上传--初始
     
      if(this.img != '0'){
          console.log('单图')
          this.newImg = this.img;
      }//多图上传--初始

      if(this.imgLists != '0' ){
        //   debugger
          console.log('多图')
          this.imgdata = this.imgLists;
          this.imgdata.forEach((item,i)=>{
            item.path = this.path;
          })
      }
    //   this.isMaterialUrl();
    },
    methods: {
      /** 
      * 调用素材库
      */
      material(){
        let _this = this;
        parent.parent.parent.window.postMessage("openMask()", "*");
        _this.$material({
          imageboxUrl: _this.materialUrl,   //地址
          modal: true,       //遮罩
          selecType: this.selecType,   //是否多选
          width: 820, //宽度
          height: 500, //高度
          lockScroll: false, //弹出框后是否锁定滚动轴
          closeOnClickModal: true, //点击遮罩是否关闭
          closeOnPressEscape: false
        }).then(function (val) {
            parent.parent.parent.window.postMessage("closeMask()", "*");
            //确认
            if(_this.imgLists != '0'){
              //多个 
              //length 已上传的图片长度
              let length = _this.imgdata.length; 
              val.forEach((item,i) => {
                //限制大小
                if(_this.Maxlength && length+ i >= _this.Maxlength ) return false;
                let data = {
                  path: item.url.split("/image")[0],
                  imageUrl:'/image'+ item.url.split("/image")[1],
                //   sort: length+i+1,
                }
                _this.imgdata.push(data);
              });
              //限制大小
              if(_this.Maxlength && length+val.length > _this.Maxlength){
                let changeData = {
                  error: length+val.length,
                  imgdata: _this.imgdata
                }
                _this.$emit('change',changeData)
                return
              }
              _this.$emit('change',_this.imgdata)
              return
            }
            if(_this.img != '0'){
              //单个
              _this.newImg = val[0].url;
              _this.$emit('change',val[0].url)
              return
            }
          }).catch(function (error) {
            parent.parent.parent.window.postMessage("closeMask()", "*");
          //取消
        }) 

      },
      /*
       * 删除图片
       * index  多个上传时删除索引
       * */
      deleteImg(index) {
        if(this.img != '0'){
          //单个
          this.newImg = '';
          this.$emit('deleteImg',this.newImg)
          return 
        }
        if(this.imgLists != '0'){
          //多个
          this.imgdata.splice(index, 1);
          this.$emit('deleteImgList',index)
          return 
        }
        
      },
      /*
       * 放大
       * */
      largeImg(img) {
        this.largeSrc = img;
        this.materialLargeSrcVisible = true;
      },
      /** 
       * 滑动的父级
       */
      drop(e){
        //通过event.preventDefault()来设置允许拖放 
        event.preventDefault();
      },
      /** 
       * 滑动元素开始
       */
      drag(e,index){
        this.dom = '';
        this.oldX = index;
        this.dom = event.currentTarget;
      },
      /** 
       * 滑动结束
       */
      allowDrop(e,index){
        event.preventDefault();
        let _this = this;
        if(index != this.oldX){
          //改变的数据
          let sort = this.imgdata[index].sort;
          let oldData = this.imgdata[this.oldX];
          //改变sort的值，方便需要排序；
          this.$set(this.imgdata[this.oldX],'sort',sort-0.01)                        
          $(e.target).before(this.dom); 
        }
        _this.$emit('change',_this.imgdata);
      },
    }
}
</script>

<style lang="less" type="text/css" scoped>
.backsize{
  background-size: 100% 100%!important
}
.avatar-box{
  .avatar-uploaderNo,
  .avatar-uploader{
    display: inline-block;
    margin-right: 5px;
  }
}
.avatar-uploaderNo{
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background: #fbfdff;
  background-size: cover; 
  line-height: 0;
  text-align: center;
  display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;
	-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;
	-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;
	-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;
  i{
      display: inline-block;
      color: #c0ccda;
      font-size: 16px
  }
  
}
.avatar-layer{
  display: none;
}
  //上传图片 有图
.avatar-uploader{
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;
	-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;
	-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;
	-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;
  background: #f9f8f8;
  background-size: cover; 
  line-height: 0;
  background-position: center;
  &>i{
      display: block;
      color: #c0ccda;
  }

  &:hover .avatar-layer{
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .3);
    position: absolute;
    top:  0;
    left: 0;
   display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;
	-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;
	-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;
    i{
        display: block;
        color: #fff;
        font-size: 18px;
        cursor: pointer;
        margin: 5px;
        font-weight: 100;
    }
  }
}
.largeSrc-box{
  margin: 0 auto;
  // max-width: 500px;
  // max-height: 500px;
  max-width: 500px;
  height: 500px;
  text-align: center;
  img{
    width: auto;
    max-width: 100%;
    max-height: 100%;
  }
}
.tip-txt{
  color: #999;
  font-size: 12px;
}
.p_ab{
	position: absolute;
}
</style>